<!DOCTYPE html><html><head><title>Ext.form.FieldAncestor | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.form.FieldAncestor',
        docClass: 'Ext.form.FieldAncestor',
        docReq: 'Ext.form.FieldAncestor',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'FieldAncestor.html#Ext-form.FieldAncestor';
    clsInfo = {"methods":[],"cfgs":["fieldDefaults"],"properties":[],"events":["fielderrorchange"],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor" target="_blank">Ext.form.FieldAncestor</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>A mixin for <a href="Ext.container.Container.html" rel="Ext.container.Container" class="docClass">Ext.container.Container</a> components that are likely to have form fields in their
items subtree. Adds the following capabilities:</p>

<ul>
<li>Methods for handling the addition and removal of <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> and <a href="Ext.form.field.Field.html" rel="Ext.form.field.Field" class="docClass">Ext.form.field.Field</a>
instances at any depth within the container.</li>
<li>Events (<a href="Ext.form.FieldAncestor.html#fieldvaliditychange" rel="Ext.form.FieldAncestor#fieldvaliditychange" class="docClass">fieldvaliditychange</a> and <a href="Ext.form.FieldAncestor.html#fielderrorchange" rel="Ext.form.FieldAncestor#fielderrorchange" class="docClass">fielderrorchange</a>) for handling changes to the state
of individual fields at the container level.</li>
<li>Automatic application of <a href="Ext.form.FieldAncestor.html#fieldDefaults" rel="Ext.form.FieldAncestor#fieldDefaults" class="docClass">fieldDefaults</a> config properties to each field added within the
container, to facilitate uniform configuration of all fields.</li>
</ul>


<p>This mixin is primarily for internal use by <a href="Ext.form.Panel.html" rel="Ext.form.Panel" class="docClass">Ext.form.Panel</a> and <a href="Ext.form.FieldContainer.html" rel="Ext.form.FieldContainer" class="docClass">Ext.form.FieldContainer</a>,
and should not normally need to be used directly.</p>
<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-fieldDefaults" class="member f ni"><a href="Ext.form.FieldAncestor.html#config-fieldDefaults" rel="config-fieldDefaults" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.FieldAncestor.html" class="definedIn docClass">Ext.form.FieldAncestor</a><br/><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor-cfg-fieldDefaults" class="viewSource">view source</a></div><a name="fieldDefaults"></a><a name="config-fieldDefaults"></a><a href="Ext.form.FieldAncestor.html#" rel="config-fieldDefaults" class="cls expand">fieldDefaults</a><span> : Object</span></div><div class="description"><div class="short">If specified, the properties in this object are used as default config values for each
Ext.form.Labelable instance (e...</div><div class="long"><p>If specified, the properties in this object are used as default config values for each
<a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> instance (e.g. <a href="Ext.form.field.Base.html" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> or <a href="Ext.form.FieldContainer.html" rel="Ext.form.FieldContainer" class="docClass">Ext.form.FieldContainer</a>)
that is added as a descendant of this container. Corresponding values specified in an individual field's
own configuration, or from the <a href="Ext.container.Container.html#defaults" rel="Ext.container.Container#defaults" class="docClass">defaults config</a> of its parent container,
will take precedence. See the documentation for <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> to see what config
options may be specified in the <tt>fieldDefaults</tt>.</p>


<p>Example:</p>


<pre><code>new Ext.form.Panel({
    fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 100
    },
    items: [{
        xtype: 'fieldset',
        defaults: {
            labelAlign: 'top'
        },
        items: [{
            name: 'field1'
        }, {
            name: 'field2'
        }]
    }, {
        xtype: 'fieldset',
        items: [{
            name: 'field3',
            labelWidth: 150
        }, {
            name: 'field4'
        }]
    }]
});</code></pre>


<p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's <tt>defaults</tt>)
and labelWidth:100 (from <tt>fieldDefaults</tt>), field3 and field4 will both get labelAlign:'left' (from
<tt>fieldDefaults</tt> and field3 will use the labelWidth:150 from its own config.</p>

</div></div></div></div><div class="m-events"><a name="events"></a><div class="definedBy">Defined By</div><h3 class="evt p">Events</h3><div id="event-fielderrorchange" class="member f ni"><a href="Ext.form.FieldAncestor.html#event-fielderrorchange" rel="event-fielderrorchange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.FieldAncestor.html" class="definedIn docClass">Ext.form.FieldAncestor</a><br/><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor-event-fielderrorchange" class="viewSource">view source</a></div><a name="fielderrorchange"></a><a name="event-fielderrorchange"></a><a href="Ext.form.FieldAncestor.html#" rel="event-fielderrorchange" class="cls expand">fielderrorchange</a>(
<span class="pre">Ext.form.FieldAncestor this, Ext.form.Labelable The, String error</span>)
</div><div class="description"><div class="short"><p>Fires when the active error message is changed for any one of the <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a>
instances within this container.</p>
</div><div class="long"><p>Fires when the active error message is changed for any one of the <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a>
instances within this container.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">this</span> : Ext.form.FieldAncestor<div class="sub-desc">
</div></li><li><span class="pre">The</span> : Ext.form.Labelable<div class="sub-desc"><p>Labelable instance whose active error was changed</p>
</div></li><li><span class="pre">error</span> : String<div class="sub-desc"><p>The active error message</p>
</div></li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>